<template>
  <el-text size="large" tag="b">{{ $title }}</el-text>
  <template v-if="$subtitle">
    <el-divider direction="vertical"></el-divider>
    <el-text tag="b" type="info">{{ $subtitle }}</el-text>
  </template>
</template>
<script setup lang="ts">
import type {MorDialogProps} from "../../types/dialog.types";
import {computed} from "vue";

interface DialogHeaderProps {
  title: string;
  subtitle: string;
  config?: Partial<MorDialogProps>;
}

const props = withDefaults(defineProps<DialogHeaderProps>(), {
  config: () => ({})
});

const $title = computed(() => props.config?.title || props.title);
const $subtitle = computed(() => props.config?.subtitle || props.subtitle);

</script>